<template>
  <view>
    <view>
      <up-navbar
          :safeAreaInsetTop="true"
          leftText="返回"
          title="个人中心"
      >
        <template #left>
          <view>
            <up-button color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" shape="circle" size="mini"
                       text="图标按钮" type="primary"></up-button>
          </view>
        </template>
        <template #center>
          <view>
            <up-search v-model="keyword" :clearabled="true" :margin="30" :shape="round" :showAction="false"
                       inputAlign="center" placeholder="日照香炉生紫烟"></up-search>
          </view>
        </template>
      </up-navbar>
    </view>
    <view :style="{marginTop: safeAreaInsets?.top + 36 + 'px'}">
      <up-notice-bar :text="text1" direction="row" fontSize="16" mode="closable"></up-notice-bar>
    </view>
    <view class="u-demo-block">
      <text class="u-demo-block__title"><!--轮播标题可不要--></text>
      <up-swiper
          :list="list3"
          bgColor="#ffffff"
          circular
          height="180"
          indicator
          indicatorMode="line"
          nextMargin="30"
          previousMargin="30"
          radius="5"
      ></up-swiper>
    </view>
    <view>
      <up-grid
          :border="false"
          col="4"
          @click="click"
      >
        <up-grid-item
            v-for="(listItem,listIndex) in list"
            :key="listIndex"
        >
          <navigator :url="listItem.path">
            <up-icon
                :customStyle="{paddingTop:20+'rpx'}"
                :name="listItem.name"
                :size="22"
            ></up-icon>
            <text class="grid-text">{{ listItem.title }}</text>
          </navigator>

        </up-grid-item>
      </up-grid>
      <up-toast ref="uToastRef"/>
    </view>
    <view>
      <navigator url="/pages/login/login">
        跳转到eee
      </navigator>
    </view>
    <up-button color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" open-type="订阅消息"
               shape="circle" size="normal" text="月落"
               type="primary"
               @click="subscribeMessage"></up-button>
  </view>


</template>

<script setup>
import {reactive, ref} from 'vue';
import {getAnnouncementsAPI, onNotifyAsk} from "../../api";
import {onShow} from "@dcloudio/uni-app";
// 创建响应式数据
const text1 = ref('uview-plus UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用');
// 响应式数据
const keyword = ref('遥看瀑布挂前川');
const {safeAreaInsets} = uni.getSystemInfoSync()
const title = ref("hello world1")
const content = ref("text文本内容")
onShow(async () => {
  const res = await getAnnouncementsAPI()
  text1.value = res.data
  console.log(res)
});
const list3 = reactive([
  'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  'https://cdn.uviewui.com/uview/swiper/swiper1.png',
]);
const subscribeMessage = async () => {
  const re = await onNotifyAsk();
}
// 创建响应式数据
const list = reactive([
  {
    name: 'list-dot',
    title: '待办',
    path: '/pages/daiban/index'
  },
  {
    name: 'lock',
    title: '锁头'
  },
  {
    name: 'star',
    title: '星星'
  },
  {
    name: 'hourglass',
    title: '沙漏'
  },
  {
    name: 'home',
    title: '首页'
  },
  {
    name: 'volume', // 注意：这里修改了 name 从 'star' 改为 'volume'，以避免列表中两个元素具有相同的 name
    title: '音量'
  },
]);

// 创建对子组件的引用
const uToastRef = ref(null);

// 定义方法
const click = (name) => {
  if (uToastRef.value) {

    uToastRef.value.success(`点击了第${name + 1}个`); // 注意：这里加1是因为通常我们是从第1个开始计数的
  }
};
</script>

<style lang="scss">
.grid-text {
  font-size: 14px;
  color: #909399;
  padding: 10rpx 0 20rpx 0;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}

//
///deep/ .u-notice-bar.data-v-da305655 {
//  height: 61rpx;
//  line-height: 61rpx;
//}
//
///deep/ .u-notice.data-v-0155aba7 {
//  height: 100%;
//}
//
///deep/ .u-notice__content.data-v-0155aba7 {
//  height: 50%;
//}
</style>
